<template>
  <el-scrollbar>
    <div class="mvall">
      <div class="info">
        <div class="mvall-con">
          <div class="singer-header">
            <div class="singer-lang">
              <span>地区：</span>
              <ul>
                <li v-for="(item,index) in diqu" :key="index" :class="{'c62e2e':dqnum === index}" @click="dqnum = index">{{item}}</li>
              </ul>
            </div>
            <div class="singer-class">
              <span>类型：</span>
              <ul>
                <li v-for="(item,index) in leixing" :key="index" :class="{'c62e2e':lxnum===index}" @click="lxnum = index">{{item}}</li>
              </ul>
            </div>
            <div class="singer-filter">
              <span>排序：</span>
              <ul>
                <li v-for="(item,index) in paixu" :key="index" :class="{'c62e2e':pxnum===index}" @click="pxnum = index">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="mvall-container">
            <ul>
              <li v-for="(item,index) in mvalllist" :key="index" class="imgli">
                <div class="mvall-img">
                  <img v-lazy="item.cover" />
                  <span class="playnum"><i class="el-icon-video-camera"></i>{{item.playCount | filterPlayCount}}</span>
                </div>
                <div class="mvall-name ellipsis">
                  <p class="ellipsis">{{item.name}}</p>
                  <p class="ellipsis">{{item.artistName}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import {getMVAll} from '@/api/api'
  export default {
    data() {
      return {
        diqu: ['全部', '内地', '港台', '欧美', '韩国', '日本'],
        leixing: ['全部', '官方版', '原声', '现场版', '网易出品'],
        paixu: ['上升最快', '最新', '最热'],
        dqnum: 0,
        lxnum: 0,
        pxnum: 0,
        mvalllist:[]
      }
    },
    methods:{
      _getmvall(){
        getMVAll().then(res=>{
          if(res.status==200){
            this.mvalllist = res.data.data
            // console.log(this.mvalllist)
          }
        })
      }
    },
    mounted() {
      this._getmvall();
    }
  }
</script>
<style scoped="scoped">
  .mvall {
    width: 100%;
    height: auto;
    padding: 0px 28px;
  }

  .singer-header {
    width: 100%;
    height: auto;
    padding: 20px 0;
  }

  .singer-header div {
    line-height: 32px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
  }

  .singer-header div ul {
    display: flex;
    align-items: center;
  }

  .singer-header div ul li {
    height: 12px;
    padding: 0px 12px;
    font-size: 12px;
    border-left: 1px solid #E4E4E7;
    line-height: 12px;
    color: #999999;
  }

  .singer-header div ul li:nth-of-type(1) {
    border-left: 0;
  }

  .singer-header div ul .c62e2e {
    color: #C62E2E;
  }

  .mvall-container ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .mvall-container ul li {
    width: 240px;
    margin-bottom: 30px;
  }

  .mvall-img {
    width: 100%;
    height: 136px;
    overflow: hidden;
    position: relative;
    border: 1px solid #E4E4E7;
  }

  .mvall-img img {
    width: 100%;
    display: block;
  }

  .mvall-name {
    line-height: 20px;
    padding: 8px 0;
  }

  .mvall-name p:nth-of-type(2) {
    font-size: 12px;
    color: #999;
  }
</style>
